A HProgress based bullet chart

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.dynamic.rect.js"></script>
<script src="RGraph.hprogress.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="100">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var hprogress = new RGraph.HProgress({
            id: 'cvs',
            min: 0,
            max: 100,
            value: 85,
            options: {
                margin: 12,
                textAccessible: true
            }
        }).grow();
        
        var coords = hprogress.coords[0];
        var x = hprogress.getXCoord(55);

        // Create the rect object that covers the lower part
        var rect = new RGraph.Drawing.Rect({
            id: 'cvs',
            x: hprogress.gutterLeft,
            y: hprogress.gutterTop + 5,
            width: x - hprogress.gutterLeft,
            height: hprogress.canvas.height - hprogress.gutterTop - hprogress.gutterBottom - 10,
            options: {
                fillstyle: 'Gradient(rgba(255,0,0,0.5):rgba(255,0,0,0):rgba(255,0,0,0))'
            }
        }).draw();
        
        x = hprogress.getXCoord(95);

        // Create the rect object that indicates the target
        var rect = new RGraph.Drawing.Rect({
            id: 'cvs',
            x: x - 3,
            y: hprogress.gutterTop + 5,
            width: 6,
            height: hprogress.canvas.height - hprogress.gutterTop - hprogress.gutterBottom - 10,
            options: {
                fillstyle: 'black',
                highlightStroke: 'rgba(0,0,0,0)',
                tooltips: ['The target was 95% of eveything, everywhere']
            }
        }).draw();
    };
</script>